<template>
	<div class="book-container">
		<div class="book-item">
			<img
				class="book-header"
				src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db170489dd5c40b5a42ba61bfc8ac4ed~tplv-k3u1fbpfcp-watermark.image?"
				alt=""
			/>
			<el-button style="width: 100%" size="small" plain>详情</el-button>
		</div>
		<div class="book-item-right">
			<div class="book-item-header">
				<el-tag type="danger" size="small" class="mx-1" effect="dark">NEW</el-tag>
				<h1>初探前端工程化</h1>
			</div>
			<div class="book-item-auth">
				<img
					style="width: 30px; height: 30px; border-radius: 50%"
					src="https://p3-passport.byteacctimg.com/img/user-avatar/bb68979f992ac426cbd75574d25702ab~300x300.image"
					alt=""
				/>
				<span>sunshine小小倩 . 资深前端工程师</span>
			</div>
			<div class="book-item-comment">
				<span>将工程化结合前端开发，让开发效率事半功倍！</span>
			</div>
			<div class="book-item-price">
				<div>
					<span>18小节</span>
					<span>·</span>
					<span>518已购买</span>
				</div>
        <div style="font-size:16px;color:red">￥29.9</div>
			</div>
			<el-button style="width: 100%;" type="primary" size="small">试读</el-button>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
	name: 'fpa-book-component',
	setup() {},
});
</script>
<style lang="scss" scoped>
.book-container {
	width: 310px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	.book-header {
		height: 120px;
		width: 90px;
	}
	.book-item-right {
		display: grid;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		color: #86909c;
		margin-left: 10px;
		font-size: 0.14rem;
		.book-item-header {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: black;
			font-size: 0.8rem;
			justify-content: space-between;
		}
		.book-item-auth {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			text-overflow: ellipsis;
			white-space: nowrap;
			align-items: center;
		}
		.book-item-comment {
      margin-top: 5px;
		}
		.book-item-price {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
		}
	}
}
</style>
